import { useReducer, useRef } from "react";
import "./App.css";

function queryData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(666)
        }, 2000)
    })
}

function App() {
    /* 
      useReducer
      1. 注意，他是hook，所以只能在组件的顶层调用他
      2. 用来计算并返回下一个状态，更新页面
      3. 比较：
         - 代码量：代码当然是useState更少
         - 可读性：简单的逻辑使用useState更加方便，复杂的逻辑用useReducer；
         - 排查错误：注意，useReducer能够方便排查一些状态错误
      4. 不适合在里面发请求
    */
    function reducer (state, action) {
        // state就是{result: 0}的值，当前状态
        // action就是{type: 'add', num: 2}，接受dispatch传递过来的值
        switch (action.type) {
            case 'add': 
                return {
                    result: state.result + action.num
                }
            case 'minus': 
                return {
                    result: state.result - action.num
                }
        }
    }
    const divRef = useRef()
    // res是当前状态
    // dispatch允许更新状态并触发重新渲染
    const [res, dispatch] = useReducer(reducer, {
        result: 0 // 初始值
    })
    console.log(res, 'res');
    return (
        <>
        <div className="card">
            {/* dispatch是要传递给reducer的操作 */}
            <div onClick={() => dispatch({type: 'add', num: 2})}>加</div>
            <div onClick={() => dispatch({type: 'minus', num: 1})}>减</div>
            <div>{res.result}</div>
        </div>
        </>
    );
}

export default App;
